﻿@page "/component/feedback/modal"
<Pager DataSource="@(new List<string>(new[] { 
                         "Demo","Basic","Image Modal","Full Width","Full Screen","Size","Inverted",
                         "Closable","Alignment","Scrollable"
                     }))">
    <Body>
        <Header1>
            Modal
            <SubHeader>
                A modal displays content that temporarily blocks interactions with the main view of a site
            </SubHeader>
        </Header1>
        <Segment>
            Call <code>Activate(bool active)</code> method with one input parameter <code>true</code> to show modal, <code>false</code> to hide modal.
        </Segment>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <Modal @ref="refModal1">
                    <HeadContent>
                        The Workflow
                    </HeadContent>
                    <ChildContent>
                        Please read the content as below:
                        <List Ordered>
                            <Item>
                                Condition 1: xxxxxxxxxxxxxx
                            </Item>
                            <Item>
                                Condition 2：xxxxxxxxxxxxxx
                            </Item>
                            <Item>
                                Condition 3：xxxxxxxxxxxxxx
                            </Item>
                        </List>
                    </ChildContent>
                    <FootContent>
                        <Button Emphasis="Emphasis.Negative" @onclick="async ()=>await refModal1.Activate(false)">Nagative</Button>
                        <Button Emphasis="Emphasis.Positive" @onclick="()=>refModal1.Activate(false)">Positive</Button>
                    </FootContent>
                </Modal>
                <Button @onclick="()=>refModal1.Activate()">Show</Button>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal>
    <HeadContent>
        The Workflow
    </HeadContent>
    <ChildContent>
        Please read the content as below:
        <List Ordered>
            <Item>
                Condition 1: xxxxxxxxxxxxxx
            </Item>
            <Item>
                Condition 2：xxxxxxxxxxxxxx
            </Item>
            <Item>
                Condition 3：xxxxxxxxxxxxxx
            </Item>
        </List>
    </ChildContent>
    <FootContent>
        <Button Emphasis=""Emphasis.Negative"" @onclick=""()=>refModal1.Activate(false)"">Nagative</Button>
        <Button Emphasis=""Emphasis.Positive"" @onclick=""()=>refModal1.Activate(false)"">Positive</Button>
    </FootContent>
</Modal>
<Button @onclick=""()=>refModal1.Activate()"">Show</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
<PresentationPart Title="Basic">
            <Description>
                A modal can reduce its complexity
            </Description>
            <RunTemplate>
                <Modal @ref="refModal2" Basic>
                    <HeadContent>
                        A basic modal
                    </HeadContent>
                    <ChildContent>
                        A modal can reduce its complexity
                    </ChildContent>
                </Modal>
                <Button @onclick="()=>refModal2.Activate()" Emphasis="Emphasis.Primary">Show</Button>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal @ref=""refModal1"" Basic>
    <HeadContent>
        A basic modal
    </HeadContent>
    <ChildContent>
        A modal can reduce its complexity
    </ChildContent>
</Modal>
<Button @onclick=""()=>refModal1.Activate()"">Show</Button>
```
")
            </CodeTemplate>
        </PresentationPart>
               <PresentationPart Title="Image Modal">
            <Description>
                A modal can contain image content
            </Description>
    <RunTemplate>
        <Modal @ref="refModal3" ImageContent>
            <HeadContent>
                Image Modal
            </HeadContent>
            <ChildContent>
                <Image Src="/img/image.png" Fluid Size="Size.Small" />
                <Description>
                    Here are some description of image
                </Description>
            </ChildContent>
        </Modal>
        <Button @onclick="()=>refModal3.Activate()" Emphasis="Emphasis.Secondary">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal ImageContent>
    <HeadContent>
        Image Modal
    </HeadContent>
    <ChildContent>
        <Image Source=""/img/image.png"" Fluid Size=""Size.Small"" />
        <Description>
            Here are some description of image
        </Description>
    </ChildContent>
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Full Width">
            <Description>
                A modal can use the entire size of the screen
            </Description>
    <RunTemplate>
        <Modal @ref="refModal4" FullWidth>
            <ChildContent>
                Give us your feedback
            </ChildContent>
        </Modal>
        <Button @onclick="()=>refModal4.Activate()">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal FullWidth>
    <ChildContent>
        Give us your feedback
    </ChildContent>
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Full Screen">
            <Description>
                A modal can overlay the entire screen
            </Description>
    <RunTemplate>
        <Modal @ref="refModal5" FullScreen>
            <HeadContent>
                Full Screen
            </HeadContent>
            <ChildContent>
                Welcome to the full screen mode, here to enjoy the full screen brought sour feeling!!
            </ChildContent>
            <FootContent>
                <Button Color="Color.Orange" @onclick="()=>refModal5.Activate(false)" Basic>Close</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal5.Activate()">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal @ref=""refModal5"" FullScreen>
    <HeadContent>
         Full Screen
    </HeadContent>
    <ChildContent>
        Welcome to the full screen mode, here to enjoy the full screen brought sour feeling!!
    </ChildContent>
    <FootContent>
        <Button Color=""Color.Orange"" @onclick=""()=>refModal5.Activate(false)"" Basic>Close</Button>
    </FootContent>
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
         <PresentationPart Title="Size">
            <Description>
                A modal can vary in size
            </Description>
    <RunTemplate>
        <Modal Size="Size.Mini" @ref="refModal6">
            <HeadContent>
                Mini
            </HeadContent>
            <ChildContent>
                Are you sure to delete this data?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal6.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal6.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal6.Activate()">Mini</Button>

        <Modal Size="Size.Tiny" @ref="refModal7">
            <HeadContent>
                Tiny
            </HeadContent>
            <ChildContent>
                Are you sure to delete this data?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal6.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal6.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal7.Activate()">Tiny</Button>

        <Modal Size="Size.Small" @ref="refModal8">
            <HeadContent>
                Small
            </HeadContent>
            <ChildContent>
                Are you sure to delete this data?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal6.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal6.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal8.Activate()">Small</Button>

        <Modal Size="Size.Large" @ref="refModal9">
            <HeadContent>
                Large
            </HeadContent>
            <ChildContent>
                Are you sure to delete this data?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal6.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal6.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal9.Activate()">Large</Button>

        <Segment>
            DO NOT USE <code>Big、Huge、Massive</code> that can cause width out of screen.
        </Segment>
        <Modal Size="Size.Massive" @ref="refModal10">
            <HeadContent>
                Massive
            </HeadContent>
            <ChildContent>
                Are you sure to delete this data?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal6.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal6.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal10.Activate()">Massive</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal Size=""Size.Mini""></Modal>
<Modal Size=""Size.Tiny""></Modal>
<Modal Size=""Size.Small""></Modal>
<Modal Size=""Size.Large""></Modal>
```
")
    </CodeTemplate>
</PresentationPart>
       <PresentationPart Title="Inverted">
            <Description>
                A modal can be shown inverted on white dimmer...
            </Description>
    <RunTemplate>
        <Modal Inverted @ref="refModal11">
            <HeadContent>
                Delete your cound?
            </HeadContent>
            <ChildContent>
                Are you sure to do that?
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal11.Activate(false)">No</Button>
                <Button Emphasis="Emphasis.Primary" @onclick="()=>refModal11.Activate(false)">Yes</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal11.Activate()">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal Inverted @ref=""refModal11"">
    <HeadContent>
        Delete your cound?
    </HeadContent>
    <ChildContent>
        Are you sure to do that?
    </ChildContent>
    <FootContent>
        <Button @onclick=""()=>refModal11.Activate(false)"">No</Button>
        <Button Emphasis=""Emphasis.Primary"" @onclick=""()=>refModal11.Activate(false)"">Yes</Button>
    </FootContent>
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Closable">
    <Description>
        To hide the "X" at top right.
    </Description>
    <RunTemplate>
        <Modal Closable="false" @ref="refModal13">
            <ChildContent>
                Validation occured!
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal13.Activate(false)">Close</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal13.Activate()">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal Closable=""false"">            
    <ChildContent>
        Validation occured!
    </ChildContent>
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Alignment">
    <RunTemplate>
        <Modal @ref="refModal12" Alignment="VerticalPosition.Top">
            <HeadContent>Top</HeadContent>
            <ChildContent>
                At the top position
            </ChildContent>
            <FootContent>
                <Button Color="Color.Orange" @onclick="e=>refModal12.Activate(false)">OK</Button>
            </FootContent>
        </Modal>
        <Modal @ref="refModal15">
            <HeadContent>Default</HeadContent>
            <ChildContent>
                Default is middle
            </ChildContent>
            <FootContent>
                <Button Color="Color.Orange" @onclick="e=>refModal15.Activate(false)">OK</Button>
            </FootContent>
        </Modal>
        <Modal @ref="refModal16" Alignment="VerticalPosition.Bottom">
            <HeadContent>Bottom</HeadContent>
            <ChildContent>
                At the bottom position
            </ChildContent>
            <FootContent>
                <Button Color="Color.Orange" @onclick="e=>refModal16.Activate(false)">OK</Button>
            </FootContent>
        </Modal>
        <Button Emphasis="Emphasis.Primary" @onclick="e=>refModal12.Activate()">Top</Button>
        <Button @onclick="e=>refModal15.Activate()">Default</Button>
        <Button Emphasis="Emphasis.Secondary" @onclick="e=>refModal16.Activate()">Bottom</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal Alignment=""VerticalPosition.Top"">
</Modal>
<Modal>
</Modal>
<Modal Alignment=""VerticalPosition.Bottom"">
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Scrollable">
            <Description>
                A modal can use the entire size of the screen
            </Description>
    <RunTemplate>
        <Modal @ref="refModal14" Scrollable>
            <HeadContent>
                A long long paragraph
            </HeadContent>
            <ChildContent>
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
                <ParagraphDemo />
                <Divider />
            </ChildContent>
            <FootContent>
                <Button @onclick="()=>refModal14.Activate(false)">Close</Button>
            </FootContent>
        </Modal>
        <Button @onclick="()=>refModal14.Activate()">Show</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Modal Scrollable>
...
</Modal>
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>
@code{
    Modal refModal1;
    Modal refModal2;
    Modal refModal3;
    Modal refModal4;
    Modal refModal5;
    Modal refModal6;
    Modal refModal7;
    Modal refModal8;
    Modal refModal9;
    Modal refModal10;
    Modal refModal11;
    Modal refModal12;
    Modal refModal13;
    Modal refModal14;
    Modal refModal15;
    Modal refModal16;
}